<template>
	<div class="sign">
		<div class="background" id="background"></div>
		<switchCheckbox :checked="true"></switchCheckbox>
		<div class="con">
			<h1>登录用户</h1>
			<div class="inputdiv">
				<label for="email">
					邮箱
				</label>
				<input type="email" placeholder="请输入邮箱" v-model="email" :autocomplete="false">
			</div>
			<div class="inputdiv">
				<label for="password">
					密码
				</label>
				<input type="password" placeholder="请输入密码" v-model="password" :autocomplete="false">
			</div>
			<button @click="dlEvent">登录</button>
		</div>
	</div>
</template>

<script>
	import switchCheckbox from "../components/switchCheckbox.vue"
	export default {
		name: "sign",
		data() {
			return {
				// email: "983500351@qq.com",
				email: "1711076720@qq.com",
				password: "xyxc0704"
			}
		},
		components: {
			switchCheckbox
		},
		methods: {
			async dlEvent() {
				let {
					data
				} = await this.$axios.post("/blog/users/signuser", {
					email: this.email,
					password: this.$md5(this.password)
				});
				// console.log(data);
				if (data.data == "用户登录成功") {
					// let userInfo = {
					// 	isLogin: true,
					// 	manage: true,
					// 	email: this.email
					// };
					// localStorage.setItem('userinfo', JSON.stringify(data.userinfo));
					Storage.prototype.setCanExpireLocal('userinfo', JSON.stringify(data.userinfo),
						30); //另外封装方法设置有效时间,30分钟之后过期
					this.$store.state.userinfo = data.userinfo;
					this.$router.push('/page')
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.sign {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		overflow: hidden;
		margin: 0;



		.background {
			background: url('../assets/images/1.png') no-repeat center center/cover;
			position: absolute;
			top: -20px;
			bottom: -20px;
			left: -20px;
			right: -20px;
			z-index: -1;
			// filter: blur(20px);
		}

		.con {
			width: 500px;
			height: 340px;
			background: #fff;
			padding: 30px;

			h1 {
				text-align: center;
				font-size: 24px;
				line-height: 24px;
				font-weight: inherit;
			}

			.inputdiv {
				text-align: left;
				margin-top: 14px;
				margin-bottom: 14px;

				label {
					display: block;
				}

				input {
					width: 100%;
					height: 40px;
					padding: 8px;
					border-radius: 5px;
					border: 1px #ccc solid;
					margin-top: 10px;
					line-height: inherit;
				}
			}

			&>button {
				text-align: center;
				line-height: 30px;
				height: 30px;
				width: 80px;
				border: 1px #ccc solid;
				border-radius: 5px;
				background: #fff;
				margin: 30px auto;
				display: block;
			}

			&>button:hover {
				background-color: #21DBB3;
				color: #fff;
			}
		}
	}
</style>
